<script setup lang="ts">
import { computed, ref } from 'vue';

import { ElMessage } from 'element-plus';

import {
  addAccount,
  editAccount,
  reqAccountDetail,
} from '#/api/exchange-center';
import { useOrderStore } from '#/store/order';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false, // 可选的默认值
  },
  current: {
    type: Object,
    default: () => ({}), // 设置 default 为一个空对象
  },
  isAdd: {
    type: Boolean,
    default: false, // 可选的默认值
  },
  platform: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(['update:visible', 'refresh']);

const orderStore = useOrderStore();
const visibles = defineModel('visible');

const loading = ref(!props.isAdd);

// const groupList= ref([])
// const platformList= ref([])

const { groups } = orderStore;

// 是否连接中
const connectLoading = ref(false);
// 表单
const dataFormRef = ref();
const dataForm = ref<any>({
  platform_id: {
    id: props.platform.id,
    name: props.platform.name,
  },
  passphrase: '',
});

const isOkxSwap = computed(() => {
  return props.platform.name === 'OkxSwap';
});

const dataRules = ref({
  ip: [
    { required: true, message: '请输入', trigger: 'blur' },
    { max: 256, message: '长度必须小于256位', trigger: 'blur' },
  ],
  group_id: [{ required: true, message: '请输入', trigger: 'blur' }],
  account: [
    { required: true, message: '请输入', trigger: 'blur' },
    { max: 256, message: '长度必须小于256位', trigger: 'blur' },
  ],
  api_key: [{ required: true, message: '请输入', trigger: 'blur' }],
  passphrase: [{ required: true, message: '请输入', trigger: 'blur' }],
  api_secret: [{ required: true, message: '请输入', trigger: 'blur' }],
  platform_id: [{ required: true, message: '请输入', trigger: 'blur' }],
});

// 关闭弹窗
const close = () => {
  connectLoading.value = false;
  emit('update:visible', false);
};

// 监听关闭
const beforeClose = (done: () => void) => {
  if (!connectLoading.value) {
    done();
  }
};

// 获取详情
const getDetail = async (id: string) => {
  const result = await reqAccountDetail(id);
  loading.value = false;
  const formValue = {
    ...result,
    group_id: result.group_id[0],
    platform_id: result.platform_id[0],
  };
  dataForm.value = formValue;
};

// 提交
const submitHandle = () => {
  dataFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const submitParams = {
        ...dataForm.value,
        group_id: dataForm.value.group_id.id,
        platform_id: dataForm.value.platform_id.id,
      };
      if (props.isAdd) {
        await addAccount(submitParams);
        ElMessage({ message: '添加成功', type: 'success' });
      } else {
        await editAccount(props.current.id, submitParams);
        ElMessage({ message: '修改成功', type: 'success' });
      }
      close();
      emit('refresh');
    }
  });
};
// 编辑
if (props.isAdd) {
  // dataForm.value = structuredClone(defaultForm.value);
} else {
  getDetail(`${props.current.id}`);
}
</script>

<template>
  <el-dialog
    v-model="visibles"
    :title="props.isAdd ? '新增' : '编辑'"
    width="680px"
    @close="close"
    :before-close="beforeClose"
    destroy-on-close
  >
    <div class="content" v-loading="loading">
      <el-form
        ref="dataFormRef"
        class="form"
        :model="dataForm"
        :rules="dataRules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="挂靠IP" prop="ip">
          <el-input v-model="dataForm.ip" maxlength="50" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="组别" prop="group_id">
          <el-select
            v-model="dataForm.group_id"
            placeholder="请选择组别"
            value-key="id"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in groups"
              :key="item.id"
              :label="item.name"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="平台" prop="platform">
          <el-input
            v-model="dataForm.platform_id.name"
            placeholder=""
            disabled
          />
        </el-form-item>
        <el-form-item label="uid" prop="account">
          <el-input v-model="dataForm.account" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="key" prop="api_key">
          <el-input v-model="dataForm.api_key" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="Secret" prop="api_secret">
          <el-input v-model="dataForm.api_secret" placeholder="请输入" />
        </el-form-item>
        <el-form-item
          label="passphrase"
          :prop="isOkxSwap ? 'passphrase' : ''"
          v-if="isOkxSwap"
        >
          <el-input v-model="dataForm.passphrase" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="dataForm.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用"
            inactive-text="停用"
          />
        </el-form-item>
        <el-form-item label="账号备注" prop="remark">
          <el-input
            v-model="dataForm.remark"
            maxlength="16"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close" :disabled="connectLoading">取消</el-button>
        <el-button
          type="primary"
          :loading="connectLoading"
          @click="submitHandle"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.content {
  padding: 30px 140px;
}
</style>
